Html

…

Hyper text markup language
- Structure of a website is made thru

Html - makes structure / body of a website

CSS - Cascading style sheet, to add colors and styling

JavaScript - To add functioning

Always make index.html as a starting/first file of html page, coz web browser starts from it

<!DOCTYPE html> -- specifies that this is the html 5 document
<html> -- root tag of a html page
  <head> -- contains a meta data
  <!-- meta tag -> contains data about data -->
    <title>My First Web Page</title>
  </head>
  <body> -- contains whatever will be displayed
    <h1>Welcome to My First Web Page!</h1>
    <p>This is a paragraph of text.</p>
  </body>
</html>

We can use lorem to write demo contain

Always use word wrap to make a good looking html file. use ALT + Z

For temporary use, we can inspect each html element. → called as developer tools

Responsive website → is the one which works perfectly everywhere

Tags → Html tags are opening and closing tags, there are some tags which only have opening tags.

e.g. → <p>use to write the paragraph body</p> —> paragraph tag

To clone any website → we just need to “view its open source code” and copy it the local file, and the set paths and live it.

Anchor tag → used for links, that contains a link address

<a href=”#link”>this is the clickable link</a>

Attributes → attribute here is href that stores a link address in it, attributes are thing that comes up with the tags.

Heading tags → <h1></h1> ….<h6></h6>

unable word wrap to avoid, horizontal scroll bar

Example of absolute links <a href=’https://example.com’>This is absolute link</a>

Example of relative links <a href=’/about.html’>About in same folder</a>

Image tag → a tag to add a image on a html page.

Bold Italic Underline tags

Break tag → to new line <br> tag is use

Small tag n Big tag

Horizontal role <hr> tag → to add a horizontal divider line

Subscript & Superscript

Pre Tags - Preserve tags

Right Professional way to use tags

Header Tag

Main Tag

Footer Tag

These three tags are used to write the proper html code, this makes sure that how anyone else can understand our code.

<html>
<head>
	<title>This is the title of Page</title>
</head>
<body>
	<header>This is header of the page, which will contain nav tags</header>
	<!--comment-->
	<main>This is the main part of the page</main>
	<!--comment-->
	<footer>this is the footer of the page</footer>
</body>
</html>

Main Tag

This is the tag that will contain main content of the page, tags under it:

<html>
<head></head>
--
<body>
	<header></header>
	<main>
		<section> A page section. </section>
		--
		<article> A self contained tag for better article or blog writing </article>
		--
		<aside> This is side content - may contains ads </aside> 
	</main>
</body>
</html>

Creating a page with these tags helps in better code writing skills and also helps in improving the SEO on browser.

Header Tag

This is tag that will contain logo or something that should be in a header, also contains navigation bar…navigation options.

<body>
	<Header>
		<nav>Home</nav>
		<nav>About</nav>
		<nav>Contact Us</nav>
	</Header>
</body>

<a>Anchor Tag</a>

anchor tag has some more attributes that help in better code writing 

<a href='xyz.com' target='_main'>
This will open the main page of xyz.com
</a>

--
<a href='xyz.com'>This will open the xyz.com in same tab</a>
--
<a href='xyz.com' target='_blank'>This will open the xyz.com in a new tab</a>

Anchor tag may contains image, text, anything as a element in between.

Aspect Ration → in a image tag we should set either height or width to make it auto set the image.

The DivDiv Tag

It is a block tag that always take full-width 

<div>This is the particular div section</div>

It is a full width/block level container.

The SpanSpan Tag

It is in-line tag that only uses the spaces how much it is required, with the use of this tag one line can contain more than one element in it.
Note- <p> paragraph tag is a block level tag.

<span> This is the span tag that is in-line level </span>

It is a in-line container.

List of In-line n block element

Lists → Ordered list & Unordered list

--Ordered list-- (gives count/numbers)
<ol>
	<li>This is list item.</li>
</ol>

--unordered list-- (give notations/just list casually)
<ul>
	<li>This is list item.</li>
</ul>

Tables in html

Table tag is use to write tables in html page, to have data in form of tabular form.

<table></table>

It contains following sub tags in it:

Always we use <tr> tag under which <th> and <td> tags

<body>
	<div>
		<table>
		--table tag--
			<tr>
			-- first row -- which will always contain table headers
				<th>name</th>
				<th>number</th>
				<th>email</th>
				<th>address</th>
				-- table header -- will used only once to show headings of table
			</tr>
			--- comment ---
			<tr>
			-- another row -- this will contain data in it
				<td>Viraj</td>
				<td>123456XXXX</td>
				<td>xyz@gmail.com</td>
				<td>123, street city state</td>
				-- table data -- data will be stored using it
			</tr>
		</table>
	</div>
</body>

More tags used inside the <table> tag

Caption tag → use to add caption to the table like a heading (like…what is the aim of table)

<body>
	<div>
		<table>
		--table tag--
		
			<caption>People's contact details</caption>
		
			<tr>
			-- first row -- which will always contain table headers
				<th>name</th>
				<th>number</th>
				<th>email</th>
				<th>address</th>
				-- table header -- will used only once to show headings of table
			</tr>
			--- comment ---
			<tr>
			-- another row -- this will contain data in it
				<td>Viraj</td>
				<td>123456XXXX</td>
				<td>xyz@gmail.com</td>
				<td>123, street city state</td>
				-- table data -- data will be stored using it
			</tr>
		</table>
	</div>
</body>

theadthead tag & tbodytbody tag

these tags are use to specify the table areas specifically, — used inside the table tag

<body>
	<div>
		<table>
		--table tag--
		
			<caption>People's contact details</caption>
		
		<thead>
		-- table head starts from here --
			<tr>
			-- first row -- which will always contain table headers
				<th>name</th>
				<th>number</th>
				<th>email</th>
				<th>address</th>
				-- table header -- will used only once to show headings of table
			</tr>
		</thead>
		-- table head ends here --
			--- comment ---
			
		<tbody>
		-- table body starts from here -- 
			<tr>
			-- another row -- this will contain data in it
				<td>Viraj</td>
				<td>123456XXXX</td>
				<td>xyz@gmail.com</td>
				<td>123, street city state</td>
				-- table data -- data will be stored using it
			</tr>
		</tbody> 
		-- table body ends here --
		</table>
	</div>
</body>

these tags make code writing better whenever dealing with tables in web page.

ColspanColspan Attribute

Forms in HTML

HTML forms are used to collect user input. The <form> tag is used to create an HTML form.

Form Tags

Input Types

Here are some of the different types of input:

Every <input> element in a form has a name attribute to identify them.

Form Attributes

HTML form tags have several attributes such as action, method, and target.

Example:

<form action="/submit_form" method="post" target="_blank">
  <label for="fname">First name:</label>

  <input type="text" id="fname" name="fname">

  <input type="submit" value="Submit">
</form>

This form when submitted, would send the user's first name to the "/submit_form" page on the server, which would open in a new tab or window.

RecapRecap

HTML Form → A form is use to collect information/ or take inputs <form> tag is used for that.

Form tag - has action attribute in it that specifies where to send the data after successful inputs.

Now there comes elements that use to take inputs in different forms

<label for="nameid">Name:</label>
<input type="text" placeholder="enter your name" id="nameid" name="name">

Here <label> tag has 'for' attribute that stores 'input id' it must match the
exact id it is storing. 
<label>Name</label> it is opening n closing tag

<input> tag is only opening tag, that has a type="text" that indicates it will take text
inputs only.
Next Attribute here is placeholder that holds a some text value.

"id" is another attribute that stores same id as writen in "for"

"name" now name attribute is use to store the name of the input field by which we are
using it.

This code block presents a set of radio buttons, which allow the user to select only one option from a list.

The <label> tags are used to provide a descriptive text for each radio button. The for attribute in the <label> tag associates the label with a specific radio button. This attribute value should match the id attribute of the associated radio button.

Inside each <label> tag, an <input> tag of type "radio" is used to create the actual radio button.

The text following the <input> tag within the <label> tag ("Option 1", "Option 2", "Option 3") provides a human-readable description for each radio button.

                    <label for="radioid1">
                        <input type="radio" id="radioid1" name="only one" value="radio 1">Option 1
                    </label>
                    <label for="radioid2">
                        <input type="radio" id="radioid2" name="only one" value="radio 2">Option 2
                    </label>
                    <label for="radioid3">
                        <input type="radio" id="radioid3" name="only one" value="radio 3">Option 3
                    </label>

This code block represents a set of checkboxes, which allow the user to select multiple options from a list.

Each checkbox is created using the <input> tag with a type="checkbox" attribute.

The <label> tags are used to provide descriptive text for each checkbox. The for attribute in the <label> tag associates the label with a specific checkbox. This attribute value should match the id attribute of the associated checkbox.

Inside each <label> tag, an <input> tag of type "checkbox" is used to create the actual checkbox.

The text following the <input> tag within the <label> tag ("You want 1?", "You want 2?", "You want 3?") provides a human-readable description for each checkbox.

<p>These are the checkboxes, you may select more than one</p>
                    <label for="checkboxid">
                        <input type="checkbox" id="checkboxid" name="groupcheckbox" class="checkbox"> You want 1?
                    </label>
                    <label for="checkboxid2">
                        <input type="checkbox" id="checkboxid2" name="groupcheckbox" class="checkbox"> You want 2?
                    </label>
                    <label for="checkboxid3">
                        <input type="checkbox" id="checkboxid3" name="groupcheckbox" class="checkbox"> You want 3?
                    </label>

This code block represents a text area field that allows the user to enter multi-line text.

The <label> tag is used to provide a descriptive text for the text area. The for attribute in the <label> tag associates the label with the specific text area. This attribute value should match the id attribute of the associated text area.

The <textarea> tag is used to create the actual text area.

The text between the <textarea> and </textarea> tags ("start writing here!") is the default text which is displayed when the text area is initially displayed.

<label for="textAreaId">Tell us why you are here?</label>
<textarea id="textAreaId" cols="40" rows="10" name="txtarea" placeholder="start writing here!"></textarea>

This code block represents a dropdown list, which allows the user to select one option from a list.

The <label> tag is used to provide a descriptive text for the dropdown list. The for attribute in the <label> tag associates the label with the specific dropdown list. This attribute value should match the id attribute of the associated dropdown list.

The <select> tag is used to create the actual dropdown list.

Inside the <select> tag, multiple <option> tags are used to define the available options in the dropdown list.

<label for="SelectOption">Choose from drop down list
  <select name="options" id="SelectOption">
    <option value="op1">op1</option>
    <option value="op2">op2</option>
    <option value="op3">op3</option>
  </select>
</label>


<!-- iframe tag -->
<iframe width="560" height="315" src="<https://www.youtube.com/embed/BsDoLVMnmZs?si=8TYDj4ezVrRvpwuo>" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

<!-- I copied this code from Youtube>Share>Embed Video, Youtube allows us to direct embed the video -->

<!-- Now to embed the video from local system -->



<iframe src="C:\\Users\\Dell\\Videos\\Captures\\OldPortfolio.mp4" width="600" height="300" scrolling="no" controls></iframe>

Writing for SEO

Search Engine Optimization (SEO) is a vital part of any website's success. When writing HTML for SEO, keep these tips in mind:

Meta Tags

Meta tags give search engines more information about a page. Here are a few important ones:

Favicon

A favicon is a small icon that appears next to your website's name in the browser tab. It helps users identify your website and stands out in bookmarks. Use the link tag in your <head> section to include a favicon:

<link rel="icon" href="favicon.ico" type="image/x-icon">

Remember, the file favicon.ico should be in the same directory as your HTML file. Be sure to replace "favicon.ico" with the path to your own favicon.

Conclusion

Writing HTML with SEO in mind can greatly increase your site's visibility and ranking in search engine results. Always remember to use meta tags, a favicon, and structure your content appropriately.

Apart from the ones mentioned in the document, here are some more meta tags that can be used in HTML:

Completed!

Creating a moving notice bar

In previous versions of html → Marquee tag is use to create the sliding bars. that is now deprecated.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Running Notice Bar</title>
<style>
    /* Optional: Style the container */
    .notice-container {
        width: 100%;
        background-color: #f0f0f0;
        padding: 10px;
        overflow: hidden;
    }

    /* Optional: Style the text */
    .notice-text {
        color: #333;
        font-size: 16px;
    }

    /* Optional: Add animation to the text */
    .marquee {
        animation: marquee 45s linear infinite;
    }

    @keyframes marquee {
        0% {
            transform: translateX(100%);
        }
        100% {
            transform: translateX(-100%);
        }
    }
</style>
</head>
<body>

<div class="notice-container">
    <div class="marquee">
        <span class="notice-text"><a href="index.html">This is a running notice bar. This text will scroll from right to left.</a></span>
    </div>
</div>

</body>
</html>

In Html5, we don’t use marquee tag to do so, instead CSS is applied to make a moving/scrolling bar.

    <div class="noticebar">
        <div class="scrollingtext">
        <a class="movingtext" href="documents.html"><span style="color:red">(new*)</span> Here are some documents or blogs that will help you learn coding. Click here to view!</a>
        </div>
    </div>
    
Now add some CSS to the html code...
    
.noticebar{
    width: 100%;
    background-color: #f0f0f0;
    overflow: hidden;
}

.scrollingtext{
    white-space: nowrap;
    animation: scroll-left 45s linear infinite;
}

.movingtext{
    text-decoration: none;
    color: black;
}

@keyframes scroll-left {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

So this is how I created a moving notice/text bar.